<!-- 个人信息 -->
<template>
	<view class="container">
		<view class="user-list x-bc">
			<text class="list-name">头像<text class="ml10" style="color:#FF0000 ;">*</text></text>
			<view class="x-f" @tap="onChooseImg">
				<image class="avatar" :src="editData.avatar" mode="widthFix"></image>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view @click="setting('nickname')" class="user-list x-bc">
			<text class="list-name">昵称<text class="ml10" style="color:#FF0000 ;">*</text></text>
			<view class="x-f">
				<input disabled class="list-val" v-model="editData.nickname" />
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="user-list x-bc">
			<text class="list-name">手机号<text class="ml10" style="color:#FF0000 ;">*</text></text>
			<view class="x-f">
				<button v-if="!editData.mobile" class='get_phone_number' open-type="getPhoneNumber"
					@getphonenumber="decryptPhoneNumber" withCredentials="true">
					点此获取手机号
				</button>
				<text class="list-val">{{ editData.mobile }}</text>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view @click="setting('gender')" class="user-list x-bc">
			<text class="list-name">性别</text>
			<view class="x-f">
				<input v-if="!gender" disabled class="list-val-null" value="完善性别获得 10茶多酚" />
				<input v-if="gender" disabled class="list-val" v-model="gender" />
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view @click="setting('birthday')" class="user-list x-bc">
			<text class="list-name">出生日期</text>
			<view class="x-f">
				<input v-if="!editData.birthday" disabled class="list-val-null" value="完善出生日期获得 20茶多酚" />
				<input v-if="editData.birthday" disabled class="list-val" v-model="editData.birthday" />
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="btn-box flex align-center justify-center"><button class="cu-btn confirem-btn"
				@tap="editUserInfo">保存</button></view>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>
		<popup ref='popup'></popup>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	import popup from '../components/popup.vue';
	export default {
		components: {
			popup
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				userData: {},
				show: false,
				iv: "",
				encryptedData: ""
			};
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,

			}),
			editData() {
				console.log(this.$store.state.user.editUserInfo)
				return this.$store.state.user.editUserInfo
			},
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			gender() {
				return this.$store.getters.gender;
			}
		},
		created() {
			let userData = JSON.stringify(this.userInfo);
			this.$store.commit('syncEditUserInfo', JSON.parse(userData))
		},
		methods: {
			...mapActions(['getUserInfo']),
			// 设置
			setting(type) {
				this.$refs.popup.show(type)
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 选择日期
			onDateChange(e) {
				this.userData.birthday = e.detail.value;
			},
			jump(path, params) {
				this.$Router.push({
					path: path,
					query: params
				});
			},
			editUserInfo() {
				let that = this;
				that.$api('user.profile', this.editData).then(res => {
					if (res.code === 1) {
						that.$tools.toast('修改信息成功');
						uni.$emit("done")
						that.getUserInfo();
						setTimeout(() => {
							that.$Router.back()
						}, 1000);
					}
				});
			},
			async onChooseImg() {
				let that = this;
				that.$tools.chooseImage(1).then(res => {
					that.$tools.uploadImage('addons/shopro/index/upload', res[0]).then(res => {
						that.editData.avatar = res.full_url;
					});
				});
			},
			decryptPhoneNumber(e1) {
				uni.login({
					provider: wx,
					success: (e2) => {
						let params = {
							code: e2.code,
							iv: e1.detail.iv,
							encryptedData: e1.detail.encryptedData
						}
						this.getPhoneNumber(params)
					}
				})
			},
			checkSession() {
				let session_key = ""
				let that = this
				wx.checkSession({
					success: () => {
						session_key = uni.getStorageSync('session_key')
						this.getPhoneNumber(session_key)
					},
					fail: () => {
						this.$api('user.getWxMiniProgramSessionKey', {
							code: code,
						}).then(res => {
							if (res.code === 1) {
								uni.setStorageSync('session_key', res.data.session_key);
								session_key = res.data.session_key
								this.getPhoneNumber(session_key)
							}
						}).catch(err => {
							console.error("获取session失败")
							console.log(err)
						});
					}
				})
			},
			getPhoneNumber(params) {
				const that = this
				this.$api('user.bindmobile', params).then(res => {
					if (res.code === 1) {
						that.$tools.toast('绑定成功');
						this.$set(this.editData, 'mobile', res.data)
					} else {
						that.$tools.toast('绑定失败，请重新绑定')
					}
				}).catch(err => {
					that.$tools.toast('绑定失败，请重新绑定')
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.get_phone_number {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		color: rgba(200, 200, 200, 1);
		background-color: transparent;
		font-size: 26rpx;
	}

	.container {
		width: 100vw;
		box-sizing: border-box;
		padding: 0 30rpx;
	}

	.user-list {
		background: #F0F0F0;
		height: 150rpx;
		border-bottom: 1rpx solid rgba($color: #191919, $alpha: 0.1);


		.list-name {
			font-size: 32rpx;
			font-weight: 400;
			color: #191919;
			opacity: 0.7;
		}

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			// background: #ccc;
		}

		.cuIcon-right {
			margin-left: 25rpx;
			opacity: 0.5;
		}

		.list-val {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #191919;
			text-align: right;
		}

		.list-val-null {
			width: 400rpx;
			font-size: 28rpx;
			font-family: "PingFang SC";
			font-weight: 500;
			color: #C98D58;
			text-align: right;
		}

		.list-notice {
			font-size: 28rpx;
			color: #C98D58;
		}
	}

	.btn-box {
		margin-top: 60rpx;

		.confirem-btn {
			width: 630rpx;
			height: 90rpx;
			background: linear-gradient(270deg, #E8B58E, #F7D9AA);
			box-shadow: 0px 3rpx 21rpx 0px rgba(196, 149, 107, 0.4);
			border-radius: 45rpx;
			color: #53181E;
		}
	}
</style>
